<template>
	<!-- 大转盘 -->
	<view class="content page" :class="{minH:isComponent==1}" :style="{'background-image':'url(' + $imgUrls(getactrule.backImg) + ')',backgroundColor:getactrule.bjColor}">
		<status-bar :title='getactrule.title' :goHome='fromShare'></status-bar>
		<view class="contentallbox hidden" v-if='!msg'>
			<image class="tiImg" :src="getactrule.img!=''?$imgUrls(getactrule.img) :staticUrl+'/lottery/titles_r.png'" mode="widthFix"></image>
			<view class="turntable_w">
				<view class="turntable_w_t">
					<view class="marquee" v-for="(tr,i) in turntable_r" :key="i" :style="{
						'background':tr.bg,
						'transform':tr.transform,
						'box-shadow':'0 0 10px 1px'+tr.bg
						}
					"></view>
				</view>
				<view class="xzpImg" :style="drawsStyle">
					<image class="xzpimg" :src="staticUrl+'/lottery/xzp.png'" mode="scaleToFill"></image>
					<view class="prize" v-for="(prize,n) in prizeArry" :key="n">
						<view class="prizeTitle">{{prize.title!=''?prize.title:'谢谢参与'}}</view>
						<image :src="prize.img!=''?$imgUrls(prize.img) :staticUrl+'/lottery/thanks.png'" mode="aspectFit"></image>
					</view>
				</view>
				<image @click="draws" class="zzImg" :src="staticUrl+'/lottery/zz.png'" mode="scaleToFill"></image>
			</view>
			<view class="winning">
				<swiper autoplay="true" interval="3000" duration="3000" circular="true" vertical="true" class="swiper" :display-multiple-items="3" easing-function="linear">
					<swiper-item v-for="(winn,index) in getactrule.winningUser" :key="index">
						<view class="swiper-item">{{winn.text}}</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="btnBox flex-box flex-center">
				<view @click="btnlook(3)" class="view_btn" :style="{'background': 'url('+staticUrl+'/lottery/jx.png) no-repeat','background-size': '100% 100%'}">活动说明</view>
				<view @click="btnlook(2)" class="view_btn" :style="{'background': 'url('+staticUrl+'/lottery/jx.png) no-repeat','background-size': '100% 100%'}">我的奖品</view>
			</view>
		</view>
		<empty type='1' v-if='msg' cat='2' :msg='msg'></empty>
		<showModel @cancelFunc='closeModel' v-if='showModal' type='2'></showModel>
		<!-- 页面弹窗 -->
		<Popup v-if="PopupIsShow" :viewText="getactrule.details" :types="types"  :prizeDate="prizeDate" @closepopup="closePopups"></Popup>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import Popup from "../components/popup.vue"
	var that;
	export default{
		props:['gid','isComponent'],
		components:{
			Popup
		},
		data(){
			return{
				
				showModal: false,
				
				turntable_r:[
					{transform: 'translateX(-1250%) translateY(0%)',bg:'#ffff00'},
					{transform: 'translateX(-1100%) translateY(-600%)',bg:'#ffffff'},
					{transform: 'translateX(-680%) translateY(-1050%)',bg:'#ffff00'},
					{transform: 'translateX(0%) translateY(-1250%)',bg:'#ffffff'},
					{transform: 'translateX(680%) translateY(-1050%)',bg:'#ffff00'},
					{transform: 'translateX(1100%) translateY(-600%)',bg:'#ffffff'},
					{transform: 'translateX(1250%) translateY(0%)',bg:'#ffff00'},
					{transform: 'translateX(1100%) translateY(600%)',bg:'#ffffff'},
					{transform: 'translateX(680%) translateY(1050%)',bg:'#ffff00'},
					{transform: 'translateX(0%) translateY(1250%)',bg:'#ffffff'},
					{transform: 'translateX(-680%) translateY(1050%)',bg:'#ffff00'},
					{transform: 'translateX(-1100%) translateY(600%)',bg:'#ffffff'},
				],
				prizeArry:'',
				drawsStyle:'',
				PopupIsShow:false,
				types:'',//弹窗类型
				cid: '',
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				getactrule:'',
				prizeDate:'',//抽奖返回数据
				positions:0,
				whirl:1,
				losing:[],
				msg:'',
				ondrawing: false,// true正在抽奖 避免重复点击
				 fromShare:0, // 是否来自分享 1是 显示返回首页
				source: 0 // 单页模式1
			}
		},
		computed: {
			...mapState(['bid', 'launch'])
		},
		created() {
			if(this.isComponent == 1){
				that = this
				that.cid = this.gid
				that.getinitialdata()//获取活动配置信息
				that.marquees()
				
			}
		},
		onLoad(e) {
			that = this;
			console.log(e)
			let options = wx.getEnterOptionsSync()
			if(options.scene == 1179 && that.launch) that.fromShare = 1 // 短链
			if(options.scene == 1154 && that.launch) that.source = 1 // 朋友圈
			console.log(options)

			if(e.bid) that.getUser({bid: e.bid})
			if(e.cid){
				that.cid = e.cid
				that.getinitialdata()//获取活动配置信息
				that.marquees()
			}
			
			 if(e.fromShare){that.fromShare = e.fromShare}
		},
		onShareAppMessage() {
			that.$addShareNum('games', that.cid, '1')
			let vid = uni.getStorageSync('vid');
			return {
				title: that.getactrule.title,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=17&gid=bigWheel&cid='+that.cid
			}
		},
		onShareTimeline() {
			that.$addShareNum('games', that.cid, '2')
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: that.getactrule.title,
				query: `share_v_id=${vid}&cid=${that.cid}&bid=${that.bid}&fromShare=1`,
				imageUrl: that.getactrule.img ? that.$imgUrls(that.getactrule.img) : shareData.imageUrl
			}
		},
		methods:{
			...mapMutations(['getUser']),
			closeModel(){
				that.showModal = false
				that.getinitialdata()//获取活动配置信息
				that.marquees()
			},
			marquees(){
				setInterval(()=>{
					for (let col in this.turntable_r) {
						if(this.turntable_r[col].bg == '#ffff00'){
							this.turntable_r[col].bg = '#FFFFFF'
						}else {
							this.turntable_r[col].bg = '#ffff00'
						}
					}
				},150)
			},
			btnlook(i){
				if(i==1){
					that.PopupIsShow = true
					that.types = i
					
				} else if(i==2) {
					uni.getStorage({
						key: 'vid',
						success: function(res){
							if(!res.data){
								if(that.source == 1) return that.$Toast('请点击右下角"前往小程序"参与活动')
								that.showModal = true
							}else{
								uni.navigateTo({
									url:"prizeList?cid="+that.cid
								})
							}
						},
						fail() {
							if(that.source == 1) return that.$Toast('请点击右下角"前往小程序"参与活动')
							that.showModal = true
						}
					})
				} else if(i==3) {
					that.PopupIsShow = true
					that.types = i
				}
			},
			draws(){
				let vid = uni.getStorageSync("vid")
				if(vid == 0 || !vid){
					if(that.source == 1) return that.$Toast('请点击右下角"前往小程序"参与活动')
					that.showModal = true
					return
				}
				if(that.ondrawing){
					return
				}
				that.ondrawing = true
				that.$http.post({
					url: '/SRA_LuckDraw/getPrize',
					data: {
						VeriCode: that.bid,
						cid: that.cid,
						v_id: vid
					}
				}).then(res => {
					if(res.data && res.code == 100){
						if(res.data.prizeDate){
							that.prizeDate = res.data
						  if(that.prizeDate.prizeDate){
							  that.positions = that.prizeDate.prizeDate.position-1
						}
						// 动画
						that.drawsStyle = "transform:rotate(" + ((that.positions*-45)+(1800*that.whirl)) + "deg);"
						that.whirl+=1
						setTimeout(()=>{
							that.ondrawing = false
							that.btnlook(1)
						},5500)
					} else {
							let l = that.losing[Math.floor(Math.random()*(that.losing.length))]
							that.drawsStyle = "transform:rotate(" + ((l*-45)+(1800*that.whirl)) + "deg);"
							setTimeout(()=>{
								that.ondrawing = false
								that.btnlook(1)
							},5500)
						}
					} else {
						that.ondrawing = false
						uni.showToast({
							icon: "none",
							title: res.notice,
							duration: 2000
						})
					}
				})
			},
			closePopups(){
				that.PopupIsShow = false
				that.getinitialdata()
			},
			//获取活动配置信息
			getinitialdata(){
				that.$http.post({
					url: '/SRA_LuckDraw/config',
					data: {
						VeriCode: that.bid,
						cid: that.cid,
						v_id: uni.getStorageSync("vid")
					}
				}).then(res => {
					if(res.data && res.code == 100){
						that.getactrule = res.data
						uni.setNavigationBarTitle({
							title: res.data.title
						})
						that.getPageData()//获取奖品列表
					}else{
						that.msg = res.notice
					}
				})
			},
			getPageData(){
				that.$http.post({
					url: '/SRA_LuckDraw/prizeList',
					data: {
						VeriCode: that.bid,
						cid: that.cid
					}
				}).then(res => {
					if(res.data && res.code == 100){
						that.prizeArry = res.data
						for(let j in that.prizeArry){
							if(that.prizeArry[j].title == ''){
								that.losing.push(j)
							}
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding: 30upx;
		background-repeat: no-repeat;
		background-size: 100% auto;
		&.minH{
			min-height: calc(100vh - 100rpx)!important;
		}
		.contentallbox{
			.tiImg{
				width: 100%;
				display: block;
			}
			.turntable_w{
				width: 600upx;
				height: 600upx;
				border-radius: 100%;
				border: 70upx solid #ae1f30;
				margin: 0 auto;
				box-shadow: 0 0 20px 1px rgba(0,0,0,0.7) inset;
				z-index: 2;
				position: relative;
				.turntable_w_t{
					width: 550upx;
					height: 550upx;
					border-radius: 100%;
					border: 50upx solid #fd4254;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					box-shadow: 0 0 20px 1px rgba(0,0,0,0.7) inset;
					z-index: 5;
					.marquee{
						width: 20upx;height: 20upx;border-radius: 100%;background: #FFFFFF;
						position: absolute;z-index: 6;left: 50%;top: 50%;margin-left: -10upx;margin-top: -10upx;
					}
				}
				.xzpImg{
					width: 540upx;
					height: 540upx;
					border: none;
					position: absolute;
					z-index: 3;
					left: 50%;
					margin-left: -270upx;
					top: 50%;
					margin-top: -270upx;
					transform: rotate(22.5deg);
					transition: transform 5s;
					.xzpimg{
						width: 100%;
						height: 100%;
						position: absolute;
						transform: rotate(-22.5deg);
					}
					.prize{
						width: 25%;
						height: 50%;
						text-align: center;
						position: absolute;
						.prizeTitle{
							overflow: hidden;
							width: 90%;
							white-space: nowrap;
							margin-left: 5%;
						}
						image{
							width: 64upx;
							margin-top: 10upx;
							height: 64upx;
						}
					}
					.prize:nth-of-type(1){transform: rotate(0);left: 37.5%;top: 52upx;color: #c12c42;}
					.prize:nth-of-type(2){transform: rotate(45deg);left: 48.5%;top: 78upx;color: #FFFFFF;}
					.prize:nth-of-type(3){transform: rotate(90deg);right: 120upx;top: 25%;color: #c12c42;} 
					.prize:nth-of-type(4){transform: rotate(135deg);right: 142upx;top: 36%;color: #FFFFFF;}
					.prize:nth-of-type(5){transform: rotate(180deg);left: 37.5%;bottom: 50upx;color: #c12c42;}
					.prize:nth-of-type(6){transform: rotate(225deg);left: 142upx;top: 36%;color: #FFFFFF;}
					.prize:nth-of-type(7){transform: rotate(270deg);left: 120upx;top: 25%;color: #c12c42;}
					.prize:nth-of-type(8){transform: rotate(315deg);right: 48.5%;top: 76upx;color: #FFFFFF;}
				}
				.zzImg{
					width: 160upx;
					height: 192upx;
					position: absolute;
					z-index: 8;
					left: 50%;
					margin-left: -80upx;
					top: 50%;
					margin-top: -110upx;
				}
			}
			.winning{
				width: 90%;
				margin-left: 5%;
				height: 180upx;
				border-radius: 10upx;
				background: rgba(0,0,0,0.5);
				color: #f4c837;
				margin-top: 20upx;
				text-align: center;
				line-height: 60upx;
				.swiper{width: 100%;height: 100%;}
			}
			
			.btnBox{
				.view_btn{
					width: 310rpx;
					text-align: center;
					line-height: 100rpx;
					font-size: 32upx;
					color: #ae1f30;
					margin: 30rpx 16rpx;
				}
			}
		}
	}
</style>
